<script lang="ts" setup>
import {onMounted, ref, watch} from "vue";
import {useFavorStore} from "../../store/FavorStore.ts";
import {useAccountStore} from "../../store/AccountStore.ts";
import type {FavorFolder} from "../../network/types/Favor.ts";
import {ElMessage} from "element-plus";

const props = defineProps({
  modelValue: {type: Boolean},
  tid: {type: Number, required: true},
  pid: {type: Number},
})
const favorStore = useFavorStore();
const show = ref(props.modelValue || false)
const loading = ref(false)
const folderId = ref<number>()

const emit = defineEmits(['update:modelValue'])
const add = () => {
  loading.value = true
  favorStore.topicAdd(folderId.value!!, props.tid, props.pid).then(res => {
    ElMessage.success(res)
    loading.value = false
    show.value = false
  }).catch(r => {
    console.error(r)
    loading.value = false
  })
}
onMounted(() => {
  favorStore.folderList(useAccountStore().getAccountUserId()).then(res => {
    folderId.value = (res as FavorFolder[]).find(i => i.defaultFolder)?.id
  })
})
watch(show, (s) => emit('update:modelValue', s))
watch(props, (s) => show.value = s.modelValue)
</script>

<template>
  <el-dialog v-model="show" append-to-body class="bg-color" title="添加到收藏" width="30%">
    <div v-loading="loading">
      <el-radio-group v-model="folderId">
        <el-radio v-for="item in favorStore.favorFolders" :key="item.id" :value="item.id">{{ item.name }}</el-radio>
      </el-radio-group>
      <div>
        <el-button :disabled="loading" type="success" @click="add">确认</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<style scoped>

</style>